<template>
  <div class="box-index-left">
    <div class="box-left">

    </div>
    <div>
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @open="handleOpen"
        @close="defaultActive"
        @select="select"
        :style="{'height':active}"
        :collapse="isCollapse"
      >
        <!-- :collapse="isCollapse" -->
        <el-submenu index="1">
          <template class="dsadas" slot="title" >
            <div class="dsdsa"
                 :style="indexActive === 1 ? 'color: rgb(255, 208, 75)' : ''"
            >
              <i class="el-icon-location"></i>
              <span class="book">图书管理</span>
            </div>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">图书管理1</el-menu-item>
            <el-menu-item index="1-2">图书管理2</el-menu-item>
            <el-menu-item index="1-3">图书管理3</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template class="dsadas" slot="title" >
            <div class="dsdsa"
                 :style="indexActive === 2 ? 'color: rgb(255, 208, 75)' : ''"
            >
              <i class="el-icon-location"></i>
              <span class="book">小说管理</span>
            </div>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">小说管理1</el-menu-item>
            <el-menu-item index="2-2">小说管理2</el-menu-item>
            <el-menu-item index="2-3">小说管理3</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    data() {
      return {
        indexActive:1,
        active:''
      }
    },
    methods:{
      handleOpen(val,keyPath){
        this.indexActive = Number.parseInt(val)
      },
      defaultActive(val,keyPath){
        console.log(val,keyPath)
      },
      select(index){
        if(this.$route.path == '/acpetArrirce' && this.$route.query.index != this.$route.query.index){
          this.$router.push({path:'/acpetArrirce?index=' + index})
        } else {
          this.$router.push({path:'/acpetArrirce?index=' + index})
        }
      }
    },
    computed:{
      ...mapGetters(['isCollapse'])
    },
    created(){
      this.active = window.innerHeight+ 'px'
    }
  }
</script>

<style lang="less" scoped>
  .box-index-left{
    width: 300px;
    overflow: hidden;
    .box-left{
      width: 100%;
      height: 80px;
      background-color: rgb(84, 92, 100)
    }
    .book{
      margin-left: 20px;
    }
    .el-submenu__title{

    }
  }
</style>
